<template>
    <div class="license-wrap">
        <div class="logo-wrap">
            <img class="icon" src="@/assets/images/logo-no-word-blue.png" />
            <span class="text">安全指数智能体(SIAS)</span>
        </div>
        <pre class="introduce-text">安全指数智能体(SIAS)授权认证</pre>
        <div class="img-wrap">
            <img style="width: 100%; height: 100%" src="@/assets/images/cover.png" />
        </div>
        <div class="box-wrap">
            <!-- 账号登录 -->
            <div class="form-box">
                <div class="title-wrap">
                    <div class="name">授权认证</div>
                </div>
                <div class="msg-wrap">提示：{{ message }}</div>
                <!-- 表单 -->
                <el-form ref="form" :model="form" label-width="0px" :rules="rules">
                    <el-form-item label="" prop="type">
                        <el-select v-model="form.type" placeholder="请选择授权类型" style="width: 100%" @change="handleTypeChange" :clearable="true">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="company">
                        <el-input v-model="form.company" placeholder="请输入公司名称" style="width: 100%"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="subject">
                        <el-input v-model="form.subject" placeholder="请输入证书名称" style="width: 100%"></el-input>
                    </el-form-item>

                    <el-row style="display: flex">
                        <el-form-item label="" prop="fileName">
                            <el-input v-model="form.fileName" placeholder="请上传.lic文件" readonly style="width: 100%"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-upload :action="uploadImgUrl" :on-change="handleChange" :on-success="handleSuccess" :on-error="handleError" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".lic">
                                <el-button style="margin-left: 20px" icon="el-icon-upload">上传许可证书</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-row>
                    <el-button type="primary" style="width: 100%; margin-top: 26px" @click="startInstallation" :loading="loading">{{ btnMsg }}</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { installLicense, getServerInfo, getLicenseInfo } from '@/api/license';

export default {
    name: 'Lincense',
    data() {
        return {
            fileType: ['lic'],
            message: '认证过期或者未认证，请上传许可证书进行认证！', // 提示信息内容
            btnMsg: '开始安装',
            loading: false,
            uploadImgUrl: process.env.VUE_APP_BASE_API + '/license/upload', // 上传的图片服务器地址
            //授权类型
            options: [
                {
                    value: 2,
                    label: '区域校验(公司)',
                },
                {
                    value: 3,
                    label: 'Mac校验(个人)',
                },
                {
                    value: 4,
                    label: '试用',
                },
            ],
            //证书安装表单
            form: {
                subject: '',
                type: '',
                company: '',
                fileName: '',
            },
            rules: {
                fileName: [{ required: true, message: '请上传文件', trigger: 'blur' }],
                subject: [{ required: true, message: '请输入证书名称', trigger: 'blur' }],
                type: [{ required: true, message: '请选择授权类型', trigger: 'blur' }], // 2:公司 3:个人 4:试用
                company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
            },
        };
    },
    mounted() {
        this.getLicense(); //直接访问授权页面时，校验是否已经认证过
    },
    methods: {
        getLicense() {
            //是否已经认证过
            getLicenseInfo()
                .then((res) => {
                    if (res.code === 200) {
                        if (res.data === true) {
                            this.$router.push('/login');
                        }
                    }
                })
                .catch(() => {});
        },
        // 上传前校检格式
        handleBeforeUpload(file) {
            // 校检文件类型
            if (this.fileType) {
                const fileName = file.name.split('.');
                const fileExt = fileName[fileName.length - 1];
                const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
                if (!isTypeOk) {
                    this.message = '文件格式不正确，请上传.lic文件！';
                    return false;
                } else {
                    return true;
                }
            }
        },
        //获取服务器信息
        handleTypeChange(value) {
            this.loading = true;
            this.btnMsg = '查询服务器信息...';
            const params = {
                type: Number(value),
            };
            getServerInfo(params)
                .then((response) => {
                    if (response.code === 200) {
                        const serverData = JSON.parse(response.msg);
                        if (value === 2) {
                            this.message = 'ip：' + serverData.ip + ' ; ' + '城市：' + serverData.city + ' ; ' + '城市编码：' + serverData.cityCode;
                        } else if (value === 3 || value === 4) {
                            this.message = 'ip：' + serverData.ip + ' ; ' + 'mac地址：' + serverData.mac;
                        }
                    } else {
                        this.message = '暂无服务器信息';
                    }
                    this.loading = false;
                    this.btnMsg = '开始安装';
                })
                .catch((error) => {});
        },
        handleChange(file, fileList) {
            this.form.fileName = file.name;
        },
        handleSuccess(response, file) {
            if (response.code === 200) {
                this.message = '证书上传成功'; // 成功提示信息
            } else {
                this.handleError(response);
            }
        },
        handleError(error) {
            this.message = error.msg || '上传失败';
        },
        //开始安装
        startInstallation() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.btnMsg = '证书安装中...';
                    // 获取Url地址
                    this.form.accessIp = window.location.href;
                    installLicense(this.form)
                        .then((response) => {
                            if (response.code === 200) {
                                this.message = response.msg || '安装成功，请登录';
                                this.$router.push('/login');
                            } else {
                                this.message = response.msg || '安装失败，请重试';
                            }
                            this.loading = false;
                            this.btnMsg = '开始安装';
                        })
                        .catch((error) => {
                            this.message = error.message || '证书安装失败';
                            this.loading = false;
                            this.btnMsg = '开始安装';
                        });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.license-wrap {
    // user-select: none;
    height: 100vh;
    max-width: 100%;
    width: 100vw;
    display: flex;

    .logo-wrap {
        position: absolute;
        top: 80px;
        left: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon {
            width: 42px;
            height: 46px;
        }

        .text {
            font-size: 36px;
            font-weight: 500;
            margin-left: 12px;
            color: #486ff2;
        }
    }

    .introduce-text {
        position: absolute;
        font-weight: 400;
        font-size: 14px;
        color: #909399;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        top: 146px;
        left: 80px;
    }

    .img-wrap {
        flex: 1;
        background: #0f73ee;
    }

    .msg-wrap {
        padding: 8px;
        font-size: 12px;
        color: #486ff2;
        line-height: 18px;
    }

    .box-wrap {
        position: relative;
        width: 608px;
        align-items: center;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;

        .form-box {
            margin-top: -8%; // 上移35下面留宽一点
            width: 320px;

            .title-wrap {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 30px;

                .name {
                    font-weight: 600;
                    font-size: 24px;
                    color: #303133;
                }

                .lang {
                    cursor: pointer;

                    ::v-deep .el-dropdown {
                        font-weight: 400;
                        font-size: 14px;
                        color: #909399;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1920px) {
    .license-wrap .box-wrap {
        width: 811px;
    }
}

@media screen and (max-width: 1180px) {
    .license-wrap .box-wrap {
        width: 498px;

        .form-box {
            width: 246px;
        }
    }

    .license-wrap .logo-wrap {
        top: 66px;
        left: 66px;

        .icon {
            width: 34px;
            height: 38px;
        }

        .text {
            font-size: 29px;
            margin-left: 10px;
            color: #486ff2;
        }
    }

    .license-wrap .introduce-text {
        font-size: 11px;
        top: 120px;
        left: 66px;
    }
}

@media screen and (max-width: 968px) {
    .license-wrap .img-wrap {
        display: none;
    }

    .license-wrap .logo-wrap {
        display: none;
    }

    .license-wrap .introduce-text {
        display: none;
    }

    .license-wrap .box-wrap {
        width: 100%;
    }
}

::v-deep .el-input--medium .el-input__inner {
    background: none;
}
</style>
